import classNames from 'classnames'
import { ReactNode, memo } from 'react'
import style from './Panel.module.scss'

export type StyleColor = 'danger' | 'positive' | 'white' | 'yellow'

type Radius = 'main' | 'medium' | 'small'

interface PanelPropsBase {
  children: ReactNode
  className?: string
  onClick?: () => void
  pointer?: boolean
}

interface PanelStyleProps {
  borderRadius?: Radius
  color?: StyleColor
  withShadow?: boolean
  withoutHover?: boolean
}

interface PanelProps extends PanelPropsBase, PanelStyleProps {}

export const Panel = memo(
  ({
    borderRadius = 'main',
    children,
    className,
    color = 'white',
    onClick,
    pointer,
    withShadow,
    withoutHover,
  }: PanelProps) => {
    const allStyles = classNames(
      style.component,
      {
        [style.cursor]: pointer,
        [style.shadow]: withShadow,
        [style['without-hover']]: withoutHover,
        [style[`radius-${borderRadius!}`]]: borderRadius,
        [style[color]]: color,
      },
      className,
    )
    return (
      <div className={allStyles} onClick={onClick}>
        {children}
      </div>
    )
  },
)
Panel.displayName = 'Panel'
